<template>
  <div>
    <el-input
      v-bind="{ ...item }"
      :value="changeSelectValue"
      readonly="readonly"
      suffix-icon="ele-ArrowDown"
      @click="onClick"
    ></el-input>

    <van-popup
      round
      closeable
      lazy-render
      style="--van-popup-close-icon-color: var(--el-color-primary)"
      close-icon="certificate"
      v-model:show="showPicker"
      @click-close-icon="onConfirm"
      position="bottom"
    >
      <div>
        <div class="title">
          <b>{{ item?.placeholder || "请选择" }}</b>
        </div>
        <div class="search">
          <el-input
            class="input-search"
            v-model="searchVal"
            placeholder="请输入名称搜索选项"
            @input="handleSearchInput"
          />
        </div>
        <div class="select-body">
          <el-checkbox-group
            v-model="selectValue"
            class="select-checkbox"
          >
            <div
              v-for="option in mobileOptions"
              :key="option?.value"
            >
              <el-checkbox
                v-if="!isHideQuota(option) && isShowOption(`${props.item?.vModel}_${option.value}`)"
                :value="option.value"
              >
                <span v-if="getSurplusQuota(option) <= 0 && item?.config?.quotaBlankWarning">
                  {{ item.config.quotaBlankWarning }}
                </span>
                <span
                  v-else
                  class="ml2"
                  v-html="option.label"
                ></span>
                <span
                  class="text-muted"
                  v-if="showQuota(option)"
                >
                  ({{ $t("formgen.radio.remaining") }}{{ getSurplusQuota(option) }})
                </span>
              </el-checkbox>
            </div>
          </el-checkbox-group>
          <div v-if="!mobileOptions || !mobileOptions.length">
            <div class="no-data">
              <p>暂无数据</p>
            </div>
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script setup lang="ts" name="MobileTMultipleSelect">
import { formItemProps } from "@/views/formgen/components/FormItem/hooks/useFormItemHook";
import { computed, onMounted, ref } from "vue";
import { selectEmits, useSelect } from "./useSelect";
import { useOptionQuota } from "@/views/formgen/components/FormItem/hooks/useOptionQuotaHook";

const props = defineProps({
  ...formItemProps
});

const emits = defineEmits(selectEmits);

const selectValue = ref([]);

const { changeValue, handleChange, getOptions, isShowOption } = useSelect(props, emits);

const searchVal = ref("");
const showPicker = ref(false);
const mobileOptions = ref<any>([]);

const changeSelectValue = computed(() => {
  const options = getOptions();
  if (!changeValue.value) {
    return "";
  }
  console.log(changeValue.value);
  const optionVal = options.filter((e: any) => changeValue.value.includes(e.value));
  if (optionVal) {
    return optionVal.map((e: any) => e.label).join(",");
  }
  return "";
});

const handleSearchInput = () => {
  mobileOptions.value = queryOptions(searchVal.value);
};

const onConfirm = () => {
  showPicker.value = false;
  changeValue.value = selectValue.value;
  handleChange(changeValue.value);
};

const queryOptions = (val: string) => {
  const options = getOptions();
  if (!val) {
    return getOptions();
  }
  return options.filter((e: any) => e.label.indexOf(val) > -1) || [];
};

const onClick = () => {
  mobileOptions.value = getOptions();
  showPicker.value = true;
};

onMounted(() => {
  mobileOptions.value = getOptions();
});

const optionQuotaHook = useOptionQuota(props);

const { isHideQuota, getSurplusQuota, showQuota } = optionQuotaHook;
</script>

<style lang="scss" scoped>
.title {
  max-width: 80%;
  font-size: 16px;
  margin-top: 8px;
  margin-left: 16px;
  margin-bottom: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search {
  padding: 2px 5px;
}

.no-data {
  text-align: center;
  padding: 10px 0;
  margin: auto;
  color: #999;
}

.select-body {
  height: 44vh;
  overflow: hidden;
  padding: 2px 10px;
  overflow-y: auto;
  font-size: 16px;

  .select-option {
    padding-bottom: 30px;
  }
}

:deep(.input-search .el-input__wrapper) {
  box-shadow: 0 0 0 1px var(--el-input-border-color, var(--el-border-color)) inset !important;
}

:deep(.select-checkbox .el-checkbox__label) {
  // 超出换行
  white-space: normal !important;
  word-break: break-all !important;
}
</style>
